<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>七颗牙学堂</title>
    <link href="../css/common.css" rel="stylesheet" type="text/css">
    <link href="../css/layer.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../js/common.js"></script>
    <link href="css/index.css" rel="stylesheet" type="text/css">
    <script src="js/share.js"></script>
</head>
<style>
    #app {
        opacity: 0;
    }
</style>

<body>
    <div id='app'>
        <div v-if="chenload">
            <div class="coursecon">
                <div class="item">
                    <div class="itemtop">
                        <p class="course_name">111</p>
                        <div class="course_status chen_yesstatus">已交清</div>
                        <!-- <div class="course_status chen_yesstatus" v-if='Number(item.status)==1'>已交清</div> -->
                        <!-- <div class="course_status chen_huangstatus" v-else-if='Number(item.status)==3'>换课中</div>
                        <div class="course_status chen_tuistatus" v-else-if='Number(item.status)==4'>已退费</div>
                        <div class="course_status chen_huangstatus" v-else-if='Number(item.status)==2'>退款中</div>
                        <div class="course_status chen_tuistatus" v-else-if='Number(item.status)==5'>已换课</div>
                        <div class="course_status chen_tuistatus" v-else-if='Number(item.status)==6'>缴费失败</div>
                        <div class="course_status chen_yesstatus" wx:else>未交清</div> -->
                    </div>
                    <div class="smallitemall">
                        <div class="smallitem">
                            课程顾问姓名：111
                        </div>
                        <div class="smallitem smallitemcon">
                            <p>课程价格：折扣价 111元</p>
                            <p>已缴费 111元</p>
                        </div>
                        <div class="smallitem">
                            <p>待缴费金额 111元</p>
                        </div>
                        <div class="smallitem">
                            押金：
                        </div>
                    </div>
                </div>
                <p class="payprice">待支付金额 ：1260元</p>
            </div>
            <!-- 支付 -->
            <div class="buytitle">选择支付方式</div>
            <div class="contentall">
                <div class="everypay1" @click="choosepay(3)">
                    <div class="payleft">
                        <img src="img/priceall.png" alt="" />
                        <div class="everytitle">小七币支付<span class="yumonery">(111)</span></div>
                    </div>
                    <div class="payright">
                        <img v-if="Number(paytype)==3" src="img/chooseactive.png" alt="" />
                        <img v-else src="img/choose.png" alt="" />
                    </div>
                </div>
                <div class="everypay1" @click="choosepay(1)">
                    <div class="payleft">
                        <img src="img/weixin.png" alt="" />
                        <div class="everytitle">微信支付</div>
                    </div>
                    <div class="payright" v-if="Number(choosetype)!=2">
                        <img v-if="Number(paytype)==1" src="img/chooseactive.png" alt="" />
                        <img v-else src="img/choose.png" alt="" />
                    </div>
                    <div class="everyright1" v-else>
                        请在浏览器打开或在微信中打开使用
                    </div>
                </div>
                <div class="everypay1" @click="choosepay(2)">
                    <div class="payleft">
                        <img src="img/zhifubao.png" alt="" />
                        <div class="everytitle">支付宝支付</div>
                    </div>
                    <div class="payright" v-if="Number(choosetype)!=1">
                        <img v-if="Number(paytype)==2" src="img/chooseactive.png" alt="" />
                        <img v-else src="img/choose.png" alt="" />
                    </div>
                    <div class="everyright1" v-else>
                        请在浏览器打开或在支付宝中打开使用
                    </div>
                </div>
            </div>
            <div class="pausure">确认支付</div>
        </div>
        <div class="loadmore" v-else>
            <img src="../img/load.gif" alt="">
        </div>

        <!-- 支付成功 -->
        <div class="detailsuccess" style="display:block">
            <div class="detailcontent">
                <div class="successtop">
                    <div class="successpic">
                        <img src="../img/paytansuccess.png" alt="">
                    </div>
                    <div class="success_order">
                        <img src="../img/paysuccesstext.png" alt="">
                    </div>
                    <!-- <div class="success_ordertext">
                        <p>您的订单支付成功</p>
                        <p>您的订单支付成功，您可以点击下侧按钮至七颗牙学堂学习更多口腔知识</p>
                    </div> -->
                    <div class="successbottom">
                        <div class="successactive" @click='sureclick'>确定</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="showerViplo" v-if="showload">
            <div class="loadmoreshowerVip">
                <img src="../img/load.gif" alt="">
            </div>
        </div>
    </div>

    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/vue-router.js"></script>
    <script type="text/javascript" src="../js/layer.js"></script>
    <script type="text/javascript">
        var app2 = new Vue({
            el: '#app ',
            data: {
                chenload: true,
                showload: false,
                user_tel: '',
                user_id: '',
                paytype: 1,
                choosetype: 1,
            },
            methods: {
                sureclick() {

                },
                choosepay(type) {
                    var that = this;
                    var choosetype = that.choosetype;
                    var istype = that.type;
                    if (Number(istype) == 3) {
                        if (Number(type) == 1 && Number(choosetype) == 2) {
                            uni.showToast({
                                title: '请在微信中打开使用',
                                icon: 'none'
                            })
                        } else if (Number(type) == 2 && Number(choosetype) == 1) {
                            uni.showToast({
                                title: '请点击右上角浏览器打开或在支付宝中打开使用',
                                icon: 'none'
                            })
                        } else {
                            that.paytype = type;
                        }
                    } else {
                        that.paytype = type;
                    }
                },
                courselist() {
                    var that = this;
                    var data = {
                        user_id: that.user_id,
                    }
                    sharerequest.postMethod("crmapi/Student/StuCourse", data, 1, (res) => {
                        if (Number(res.errcode) == 0) {
                            var data = res.data;
                            that.pagedata = data;
                            if (Number(that.page) <= 0) {
                                that.course_list = data;
                            } else {
                                that.course_list = that.course_list.concat(data);
                            }
                        }
                        that.chenload = true;
                        that.showload = false;
                    })
                },
            },
            mounted() {
                var that = this;
                $('#app').css('opacity', 1);
                var ua = window.navigator.userAgent.toLowerCase();
                if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                    // 微信
                    that.paytype = 1;
                    that.choosetype = 1;
                    if (window.sessionStorage.openid) {

                    } else {
                        window.location.href = shareurl + 'api/User/WechatScope?appid=' + appid + '&route=' + wechaturl + '&to=' + wechaturl1 + '&platform=2&is_crm=1';
                    }
                } else if (ua.match(/Alipay/i) == "alipay") {
                    // 支付宝
                    that.paytype = 2;
                    that.choosetype = 2;
                } else {
                    // 其他
                    that.paytype = 3;
                    that.choosetype = 3;
                }
                if (localStorage.getItem('erp_phone')) {
                    var user_tel = localStorage.getItem('erp_phone');
                    if ((/^1\d{10}$/.test(user_tel))) {
                        that.user_tel = localStorage.getItem('erp_phone');
                        // that.courselist();
                    } else {
                        window.location.href = 'login.html';
                    }
                } else {
                    window.location.href = 'login.html';
                }
            }
        })
    </script>
</body>

</html>